<template>
    <el-row>
        <el-row v-if="replies&&replies.length>0">
            <el-col :span="24" v-for="reply in replies" :key="reply.id">
                <div>
                    <a class="a-reply" @click="goToPost(reply.postId)">&nbsp;前往帖子</a>
                    <reply-item @listStorey="listStorey(reply.id)"
                                @reloadReply="obtainReplies"
                                management
                                :reply="reply"></reply-item>
                </div>
            </el-col>
        </el-row>
        <div class="none" v-else>
            <div>您没有过任何评论</div>
        </div>
        <el-col :span="18" :offset="3">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.page"
                :page-sizes="pageInfo.sizes"
                :page-size="pageInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
            </el-pagination>
        </el-col>
    </el-row>
</template>

<script>
    import ReplyItem from '@/components/postReply/ReplyItem'
    import { mapActions } from 'vuex'

    export default {
        name: 'replies',
        components: {
            ReplyItem
        },
        data () {
            return {
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                    sizes: [20, 50, 100, 200, 300, 400]
                },
                replies: []
            }
        },
        mounted () {
            this.obtainReplies()
        },
        methods: {
            ...mapActions({
                pageCurrentRepliesAction: 'reply/pageCurrentReplies',
                listStoreyAction: 'storey/listStorey',
                getPostByIdAction: 'post/getById'
            }),
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.obtainReplies()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.obtainReplies()
            },
            obtainReplies () {
                this.action(this.pageCurrentRepliesAction({
                    page: this.pageInfo.page,
                    size: this.pageInfo.size
                }), data => {
                    if (data.data) {
                        this.replies = data.data.records
                        this.pageInfo.total = data.data.total
                    }
                })
            },
            listStorey (id) {
                this.action(this.listStoreyAction(id), data => {
                    this.replies.find(reply => reply.id === id).storeys = data.data
                })
            },
            goToPost (id) {
                this.action(this.getPostByIdAction(id), data => {
                    let post = data.data
                    this.$router.push(`/area/${post.area}/${post.id}`)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .a-reply {
        font-size: 16px;
        float: left;
        color: rgba(255, 44, 231, 0.81);
    }

    a {
        text-decoration: none;
        cursor: pointer;
    }

    a:link {
        color: #216278;
    }

    a:visited {
        color: #216278;
    }

    a:hover {
        color: rgba(255, 151, 60, 0.8);
    }

    a:active {
        color: rgba(255, 86, 25, 0.8);
    }
</style>
